<template>
	<view class="hourly-rainfall">
		<view class="title_tag">
			<view>站点类型</view> 
			<view>叶畈水库</view> 
			<view>2/23 ~ 2/27</view>
		</view>   
		<view class="chart_box" id="todayChart"></view>
		<uni-section title="监测数据" type="line">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width="150">时间</uni-th> 
					<uni-th align="center"  width="150">入库流量</uni-th> 
					<uni-th align="center"  width="150">出库流量</uni-th>  
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center" width="150">{{ item.date }}</uni-td> 
					<uni-td align="center" width="150">{{ item.Upstream }}</uni-td> 
					<uni-td align="center" width="150">{{ item.downstream }}</uni-td>  
				</uni-tr>
			</uni-table>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				loading: false, 
				tableData: [
					{ date: "09-19:17", Upstream: "15.8", downstream: "15.7" },  
					{ date: "09-19:18", Upstream: "16.7", downstream: "16.9" },  
					{ date: "09-19:19", Upstream: "18.3", downstream: "17.2" },  
					{ date: "09-19:20", Upstream: "19.1", downstream: "20.3" },  
					{ date: "09-19:21", Upstream: "16.9", downstream: "15.7" },  
					{ date: "09-19:22", Upstream: "21.3", downstream: "20.4" },  
					{ date: "09-19:23", Upstream: "19.4", downstream: "18.6" },  
					{ date: "09-19:24", Upstream: "17.5", downstream: "22.3" },  
					{ date: "09-19:25", Upstream: "18.4", downstream: "15.9" },  
					{ date: "09-19:26", Upstream: "19.4", downstream: "17.3" },  
					{ date: "09-19:27", Upstream: "16.9", downstream: "19.5" },  
				],
			}
		},
		mounted() {
			this.initLine();
		},
		methods: {
			onTabClick(item) {
				console.log('Clicked tab:', item); 
				this.tabCurrentItem = item;
			},
			getRandomValue(min, max, decimal) {
				return parseFloat((Math.random() * (max - min) + min).toFixed(decimal));
			},
			initLine() {
				let _this = this;
				var chartDom = document.getElementById("todayChart");
				var chart = _this.$echarts.init(chartDom);
				chart.clear();
				chart.resize();   
				let colorList = [ "rgba(158,135,255", "rgba(0,212,199", "rgba(254,154,139","rgba(74,108,253" ];
				var xData =['00:00','02:00','04:00','06:00','08:00','10:00','12:00',
				'14:00','16:00','18:00','20:00','22:00','24:00']  
				let data = [
					{ name: "入库流量", data: [] },
					{ name: "出库流量", data: [] }, 
				]
				for (let i = 1; i < 14; i++) {  
					data[0].data.push(_this.getRandomValue(15.7, 22.8, 1));
					data[1].data.push(_this.getRandomValue(15.7, 22.8, 1)); 
				};
				let seriesData = [];
				let legendData = [];
				data.forEach((item,index) => {
					seriesData.push({
						name: item.name,
						type: 'line',
						showAllSymbol: true,
						symbol: 'circle',
						symbolSize: 3,
						smooth: true,
						lineStyle: {
							normal: {
								color: `${colorList[index]}, 1)`,
							},
						},
						label: {
							show: false, 
						},
						itemStyle: {
							color: `${colorList[index]}, 1)`,
							borderColor: `${colorList[index]}, 1)`,
							borderWidth: 2,
						},
						areaStyle: {
							normal: {
								color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: `${colorList[index]}, 0.3)`
									},
									{
										offset: 1,
										color: `${colorList[index]}, 0)`
									}
								], false),
							}
						},
						data: item.data			
					});
					legendData.push(item.name)
				});
				var option = {  
					legend: {
						data: legendData,
						x: "right",
						top: "2%"
					},
					grid: {
						top: '16%',
						left: '5%',
						right: '8%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: [{
						type: 'category', 
						axisTick: {
							show: false,
						},
						axisLabel: {
							color: '#3a3a3a' 
						},
						splitLine: {
							show: false
						},
						axisLine: { 
							lineStyle: {
								color: '#b9b9b9'
							}, 
						},
						boundaryGap: false,
						data: xData
					}],

					yAxis: [{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type:'dashed',//虚线
								color: '#dcdcdc', 
							}
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: true,
							margin: 20,
							textStyle: {
								color: '#3a3a3a',
							},
						},
						axisTick: {
							show: false,
						},
					}],
					series: seriesData
				}
				chart.setOption(option);

			},
		}
	}
</script>

<style lang="scss">
.chart_box{
	height: 16rem;
	width: 100%;
}
.title_tag{
	display: flex;
	justify-content: space-around;
	font-size: 0.9rem;
	padding: 0.4rem 0;
}
.uni-section{
	background: unset !important; 
	padding: 0 0.8rem 0.8rem;
}
/deep/ .uni-section-header{
	padding-left: 0 !important;
}

</style>
